<template>
  <div class="border-image-box taiziwan">
    <div class="box-title">太子湾大草坪</div>
    <div class="main-box">
      <div class="video-box">
        <div id="playWind"></div>
        <div class="btn-box" :class="{ 'btn-box-none': playing }">
          <div class="stop-control" v-if="playing === true" @click="stopVideo"></div>
          <div class="play-control" v-if="playing === false" @click="realplay"></div>
        </div>
        <div class="cover_box" v-if="isImg === false">
          <img src="~@/assets/images/equipment/taiziwan.jpg" alt="" />
        </div>
      </div>
      <div class="control-box">
        <div class="title-box">云台基础控制</div>
        <div class="control-basic">
          <div class="control-left">
            <div
              :class="`operate-item ${detail.action == 0 && detail.command == 'LEFT_UP' ? `stop` : `LEFT_UP`}`"
              @click="choose('LEFT_UP')"
            ></div>
            <div
              :class="`operate-item ${detail.action == 0 && detail.command == 'UP' ? `stop` : `UP`}`"
              @click="choose('UP')"
            ></div>
            <div
              :class="`operate-item  ${detail.action == 0 && detail.command == 'RIGHT_UP' ? `stop` : `RIGHT_UP`}`"
              @click="choose('RIGHT_UP')"
            ></div>
            <div
              :class="`operate-item  ${detail.action == 0 && detail.command == 'LEFT' ? `stop` : `LEFT`}`"
              @click="choose('LEFT')"
            ></div>
            <div
              :class="`operate-item  ${detail.action == 0 && detail.command == 'GOTO_PRESET' ? `stop` : `GOTO_PRESET`}`"
              @click="choose('GOTO_PRESET')"
            ></div>
            <div
              :class="`operate-item  ${detail.action == 0 && detail.command == 'RIGHT' ? `stop` : `RIGHT`}`"
              @click="choose('RIGHT')"
            ></div>
            <div
              :class="`operate-item  ${detail.action == 0 && detail.command == 'LEFT_DOWN' ? `stop` : `LEFT_DOWN`}`"
              @click="choose('LEFT_DOWN')"
            ></div>
            <div
              :class="`operate-item  ${detail.action == 0 && detail.command == 'DOWN' ? `stop` : `DOWN`}`"
              @click="choose('DOWN')"
            ></div>
            <div
              :class="`operate-item  ${detail.action == 0 && detail.command == 'RIGHT_DOWN' ? `stop` : `RIGHT_DOWN`}`"
              @click="choose('RIGHT_DOWN')"
            ></div>
          </div>
          <div class="control-right">
            <div
              :class="`operate-item  ${detail.action == 0 && detail.command == 'ZOOM_IN' ? `stop` : `ZOOM_IN`}`"
              @click="choose('ZOOM_IN')"
            ></div>
            <div
              :class="`operate-item  ${detail.action == 0 && detail.command == 'ZOOM_OUT' ? `stop` : `ZOOM_OUT`}`"
              @click="choose('ZOOM_OUT')"
            ></div>
            <div
              :class="`operate-item  ${detail.action == 0 && detail.command == 'FOCUS_NEAR' ? `stop` : `FOCUS_NEAR`}`"
              @click="choose('FOCUS_NEAR')"
            ></div>
            <div
              :class="`operate-item  ${detail.action == 0 && detail.command == 'FOCUS_FAR' ? `stop` : `FOCUS_FAR`}`"
              @click="choose('FOCUS_FAR')"
            ></div>
            <div
              :class="`operate-item  ${
                detail.action == 0 && detail.command == 'IRIS_ENLARGE' ? `stop` : `IRIS_ENLARGE`
              }`"
              @click="choose('IRIS_ENLARGE')"
            ></div>
            <div
              :class="`operate-item  ${detail.action == 0 && detail.command == 'IRIS_REDUCE' ? `stop` : `IRIS_REDUCE`}`"
              @click="choose('IRIS_REDUCE')"
            ></div>
          </div>
        </div>
        <div class="title-box">屏幕操作控制</div>
        <div class="operate-info">
          <div :class="`operate-item full `" @click="fullScreenSingle()"></div>
          <div :class="`operate-item cappic `" @click="CapturePicture()"></div>
        </div>
        <div class="title-box">计数</div>
        <div class="count-box">
          <div @click="downloadBlob()">
            <img src="~@/assets/images/equipment/count.png" alt="" />
            <span>开始计数</span>
          </div>
        </div>
        <!-- <div class="title-box">云台速度</div>
        <div class="control-info">
          <a-row>
            <a-col :span="12">
              <a-slider v-model="detail.speed" :min="20" :max="60" />
            </a-col>
            <a-col :span="4">
              <a-input-number v-model="detail.speed" :min="20" :max="60" style="marginLeft: 16px" />
            </a-col>
          </a-row>
        </div> -->
      </div>
    </div>
    <div class="list-box">
      <a-list :loading="loading" size="large" :pagination="listData.length ? pagination : null" :data-source="listData">
        <a-list-item slot="renderItem" key="item.title" slot-scope="item, index" class="item">
          <div class="left">
            <div @click="$refs.uploadModal.look(listData, index)">
              <img :src="`${filePreviewUrl}${item.url}`" alt="" />
            </div>
            <div>
              <div>{{ item.count }}<span>人</span></div>
              <div>区域人数</div>
            </div>
            <div>
              <div>{{ item.name }}</div>
              <div>拍摄者</div>
            </div>
            <div>
              <div>{{ item.time.replace('T', ' ') }}</div>
              <div>拍摄时间</div>
            </div>
          </div>
          <div class="right" @click="del(item)"></div>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>

<script>
import { Slider, message } from 'ant-design-vue'
import { getVideoUrl, windowControl, tzwPic, tzwList, droneTzw } from '@/api/monitoring/detail.js'
import { minioBase64, filePreviewUrl } from '@/api/common'
import storage from 'store'

export default {
  name: 'Taiziwan',
  data() {
    return {
      detail: {
        PatrolIndex: 1,
        action: 1,
        command: 'LEFT',
        ip: '192.18.24.16',
        patrolIndex: 1,
        presetIndex: 20,
        speed: 40,
      },
      urls: {
        realplay: '',
        streamSecrtKey: '',
      },
      jsDecoder: null,
      playing: null,
      coverVal: '',
      listData: [],
      pagination: {
        onChange: page => {
          this.pagination.current = page
          this.getPage()
        },
        current: 1,
        pageSize: 5,
        total: 0,
        showTotal: total => `共 ${total} 条`,
      },
      loading: false,
      comfirmVisible: false,
      delId: '',
      showDownloadLoding: false,
      filePreviewUrl,
      isImg: false,
    }
  },
  components: {
    ASlider: Slider,
  },
  mounted() {
    this.init()
    getVideoUrl({ ip: this.detail.ip }).then(res => {
      this.urls.realplay = res.result
      this.isImg = false
      this.playing = false
      // this.$nextTick(() => {
      //   this.realplay()
      // })
    })
    this.getPage()
  },
  methods: {
    init() {
      // 初始化插件
      this.jsDecoder = new window.JSPlugin({
        szId: 'playWind',
        iType: 1,
        iWidth: 1000,
        iHeight: 600,
        iMaxSplit: 1,
        iCurrentSplit: 1,
        szBasePath: process.env.NODE_ENV == 'development' ? '/dist' : '/people/dist',
        oStyle: {
          border: '#343434',
          borderSelect: 'red',
          background: '#4C4B4B',
        },
      })
      this.jsDecoder.JS_Resize(
        document.getElementById('playWind').clientWidth,
        document.getElementById('playWind').clientHeight
      )
      window.onresize = () => {
        console.log(document.getElementById('playWind').clientWidth)
        this.jsDecoder.JS_Resize(
          document.getElementById('playWind').clientWidth,
          document.getElementById('playWind').clientHeight
        )
      }
    },
    realplay() {
      var curUrl = this.urls.realplay // 预览URL
      var streamSecrtKey = this.urls.streamSecrtKey // 码流密钥
      var url = ''
      var playUrl = ''
      if (!curUrl) {
        alert('Please input previewUrl.')
        return
      }
      var tempArr = curUrl.split('/')
      if (tempArr.length > 4) {
        url = 'ws://' + tempArr[2] + '/' + '001'
        playUrl = tempArr[3] + '/' + tempArr[4]
      } else {
        alert('The format of the Preview Url is incorrect.')
        return
      }
      if (streamSecrtKey != '') {
        this.jsDecoder.JS_SetSecretKey(iWind, streamSecrtKey)
      }
      this.jsDecoder
        .JS_Play(
          url,
          {
            playURL: playUrl, // 通道预览URL, 流媒体
            auth: '', // 认证信息, 设备用户名&密码
            token: '', // token
          },
          iWind
        )
        .then(
          () => {
            this.isImg = true
            this.playing = true
            console.log('realplay success')
          },
          () => {
            this.$message.error('视频流解析失败，请查看设备')
          }
        )
    },
    choose(command) {
      if (this.playing != true) {
        this.$message.error('请先开始播放视频')
        return
      }
      // if(this.detail.command==command){
      //   this.detail.action = !this.detail.action ? 1 : 0
      // }
      this.detail.command = command
      windowControl({ ...this.detail, action: 0 }).then(res => {
        windowControl({ ...this.detail, action: 1 }).then(res => {})
      })
    },
    fullScreenSingle() {
      this.jsDecoder.JS_FullScreenDisplay(true)
    },
    CapturePicture() {
      this.jsDecoder.JS_CapturePicture(iWind, 'img', 'JPEG').then(
        function () {
          console.log('CapturePicture success')
        },
        function () {
          message.error('请先开始播放视频')
        }
      )
    },
    stopVideo() {
      this.jsDecoder.JS_Stop(iWind).then(
        () => {
          this.isImg = false
          this.playing = false
        },
        () => {
          console.log('stop error')
        }
      )
    },
    downloadBlob() {
      if (!this.playing) {
        message.error('请先开始播放视频')
        return
      }
      this.downloadPercent = 0
      const self = this
      this.jsDecoder.JS_CapturePicture(iWind, 'img', 'JPEG', imageData => {
        let url = null
        url = `${this.transformUint8ArrayToBase64(imageData)}`
        minioBase64({ base64: url }, 'xihu').then(res => {
          if (res.success) {
            const numa = storage.get('user_info').realname
            self.getPage()
            this.showDownloadLoding = true
            tzwPic(res.result, numa).then(data => {
              if (data.success) {
                self.pagination.current = 1
                self.showDownloadLoding = false
                self.getPage()
              }
            })
          }
        })
      })
    },
    transformUint8ArrayToBase64(array) {
      var binary = ''
      for (var len = array.byteLength, i = 0; i < len; i++) {
        binary += String.fromCharCode(array[i])
      }
      return window.btoa(binary).replace(/=/g, '')
    },
    getPage() {
      this.loading = true
      tzwList(this.pagination.current, this.pagination.pageSize).then(res => {
        this.loading = false
        if (res.success) {
          if (res.result) {
            this.listData = res.result.records
            if (this.showDownloadLoding) {
              this.listData[0].count = '计数中'
            }
            this.pagination.total = res.result.total
          }
        }
      })
    },
    del(item) {
      this.delVal = item.id
      this.comfirmVisible = true
    },
  },
  beforeDestroy() {
    this.stopVideo()
  },
}
</script>

<style scoped lang="less">
.taiziwan {
  .box-title {
    font-size: 24px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1d2129;
    padding-left: 60px;
    position: relative;
    line-height: 48px;
    padding-bottom: 24px;
    // border-bottom: 1px solid #A5BDB5;

    .addBtn {
      float: right;
      height: 52px;
      line-height: 52px;
    }

    &::before {
      content: '';
      width: 48px;
      height: 48px;
      left: 0;
      top: 0;
      position: absolute;
      display: inline-block;
      background: url('~@/assets/images/comfortConfig/cardIcon.png') no-repeat center;
      background-size: 100%;
    }
  }

  .main-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    .video-box {
      // flex-grow: 1;
      height: 600px;
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      &:hover {
        .stop-control {
          display: block;
        }
      }

      #playWind {
        // width: 6.01rem !important;
        height: 602px !important;
        margin-top: -1px;
        margin-left: -1px;
      }

      .stop-control {
        position: absolute;
        left: 40px;
        bottom: 50%;
        width: 50px;
        height: 50px;
        transform: translate(0, 50%);
        background: url(~@/assets/images/stop-video.png) no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        display: none;
      }

      .play-control {
        position: absolute;
        left: 40px;
        bottom: 50%;
        width: 50px;
        height: 50px;
        transform: translate(0, 50%);
        z-index: 9;
        cursor: pointer;
        background: url(~@/assets/images/play_video.png) no-repeat;
        background-size: 100% 100%;
      }

      .cover_box {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .btn-box {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 110px;
        background: rgba(0, 0, 0, 0.2);
        z-index: 5;
      }
      .btn-box-none {
        display: none;
      }
      .stop-control:hover {
        background: url(~@/assets/images/stop-video1.png) no-repeat;
        background-size: 100% 100%;
      }
      .play-control:hover {
        background: url(~@/assets/images/play_video1.png) no-repeat;
        background-size: 100% 100%;
      }
    }
    .video-box:hover .btn-box-none {
      display: block;
    }

    .control-box {
      width: 348px;
      margin-left: 50px;

      .title-box {
        display: flex;
        align-items: center;
        font-size: 20px;
        color: #1d2129;
        margin-bottom: 24px;

        &::before {
          content: '';
          background-color: #3f7a66;
          width: 3px;
          height: 17px;
          display: block;
          margin-right: 3px;
        }
      }

      .control-basic {
        display: flex;
        margin-bottom: 64px;

        .control-left {
          width: 168px;
          height: 168px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          margin-right: 70px;

          .operate-item {
            width: 48px;
            height: 48px;

            border: 1px solid #a5bdb5;
            border-radius: 4px;
            cursor: pointer;

            &.stop {
              background: url(~@/assets/images/stop-yuntai.png) no-repeat center center;
            }

            &.LEFT_UP {
              background: url(~@/assets/images/poiont.png) no-repeat center center;
            }

            &.UP {
              &::after {
                content: '';
                position: absolute;
                display: block;
                width: 48px;
                height: 48px;
                background: url(~@/assets/images/poiont.png) no-repeat center center;
                transform: rotate(45deg);
              }
            }

            &.RIGHT_UP {
              &::after {
                content: '';
                position: absolute;
                display: block;
                width: 48px;
                height: 48px;
                background: url(~@/assets/images/poiont.png) no-repeat center center;
                transform: rotate(90deg);
              }
            }

            &.LEFT {
              &::after {
                content: '';
                position: absolute;
                display: block;
                width: 48px;
                height: 48px;
                background: url(~@/assets/images/poiont.png) no-repeat center center;
                transform: rotate(-45deg);
              }
            }

            &.GOTO_PRESET {
              background: url(~@/assets/images/reset.png) no-repeat center center;
            }

            &.RIGHT {
              &::after {
                content: '';
                position: absolute;
                display: block;
                width: 48px;
                height: 48px;
                background: url(~@/assets/images/poiont.png) no-repeat center center;
                transform: rotate(135deg);
              }
            }

            &.LEFT_DOWN {
              &::after {
                content: '';
                position: absolute;
                display: block;
                width: 48px;
                height: 48px;
                background: url(~@/assets/images/poiont.png) no-repeat center center;
                transform: rotate(-90deg);
              }
            }

            &.DOWN {
              &::after {
                content: '';
                position: absolute;
                display: block;
                width: 48px;
                height: 48px;
                background: url(~@/assets/images/poiont.png) no-repeat center center;
                transform: rotate(-135deg);
              }
            }

            &.RIGHT_DOWN {
              &::after {
                content: '';
                position: absolute;
                display: block;
                width: 48px;
                height: 48px;
                background: url(~@/assets/images/poiont.png) no-repeat center center;
                transform: rotate(180deg);
              }
            }
          }
        }

        .control-right {
          width: 108px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          .operate-item {
            width: 48px;
            height: 48px;
            cursor: pointer;

            border: 1px solid #a5bdb5;
            border-radius: 4px;

            &.stop {
              background: url(~@/assets/images/stop-yuntai.png) no-repeat center center;
            }

            &.ZOOM_IN {
              background: url(~@/assets/images/ZOOM_IN.png) no-repeat center center;
            }

            &.ZOOM_OUT {
              background: url(~@/assets/images/ZOOM_OUT.png) no-repeat center center;
            }

            &.FOCUS_NEAR {
              background: url(~@/assets/images/FOCUS_NEAR.png) no-repeat center center;
            }

            &.FOCUS_FAR {
              background: url(~@/assets/images/FOCUS_FAR.png) no-repeat center center;
            }

            &.IRIS_ENLARGE {
              background: url(~@/assets/images/IRIS_ENLARGE.png) no-repeat center center;
            }

            &.IRIS_REDUCE {
              background: url(~@/assets/images/IRIS_REDUCE.png) no-repeat center center;
            }
          }
        }
      }

      .operate-info {
        margin-bottom: 64px;
        display: flex;
        justify-content: space-between;
        width: 112px;

        .operate-item {
          width: 48px;
          height: 48px;
          cursor: pointer;
          border: 1px solid #a5bdb5;
          border-radius: 4px;

          &.full {
            background: url(~@/assets/images/full.png) no-repeat center center;
          }

          &.cappic {
            background: url(~@/assets/images/cappic.png) no-repeat center center;
          }
        }
      }
      .count-box {
        div {
          width: 150px;
          padding: 10px 0;
          color: #ffffff;
          font-size: 20px;
          background-color: #3f7a66;
          border-radius: 8px;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          img {
            margin-right: 10px;
          }
        }
        div:hover {
          background-color: #6a9d8c;
        }
        div:active {
          background-color: #215543;
        }
      }
    }
  }
  .list-box {
    margin: 40px 0;
    /deep/ .ant-list {
      width: 100%;
    }
    .item {
      border-bottom: 1px solid #a5bdb5 !important;
      .left {
        display: flex;
        align-items: center;
        flex: 1;
        > div:nth-child(1) {
          width: 150px;
          height: 100px;
          border-radius: 8px;
          overflow: hidden;
          margin-right: 70px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
        > div {
          font-size: 16px;
          font-family: PingFang SC;
          color: #4e5969;
          margin-right: 120px;
          flex-shrink: 0;
          div:nth-child(1) {
            font-size: 24px;
            font-family: DIN Alternate;
            color: #1d2129;
          }
          span {
            font-size: 14px;
            color: #86909c;
          }
        }
        > div:nth-child(2) {
          min-width: 100px;
        }
        > div:nth-child(3) {
          min-width: 80px;
        }
      }
      .right {
        cursor: pointer;
        width: 40px;
        height: 40px;
        background: url('~@/assets/images/equipment/del.png') no-repeat center;
        background-size: 100%;
      }
      .right:hover {
        background: url('~@/assets/images/equipment/del_hover.png') no-repeat center;
        background-size: 100%;
      }
      .right:active {
        background: url('~@/assets/images/equipment/del_press.png') no-repeat center;
        background-size: 100%;
      }
    }
    /deep/.ant-pagination-prev .ant-pagination-item-link,
    /deep/.ant-pagination-next .ant-pagination-item-link,
    /deep/.ant-pagination-item {
      height: 30px;
      width: 30px;
      line-height: 30px;
      background-color: transparent;
      border: 0;
      vertical-align: inherit;
    }
    /deep/ .ant-pagination-item-active {
      color: #3f7a66;
      background: rgba(63, 122, 102, 0.1);
      border-radius: 4px;
    }
  }
}
</style>
